<template>
  <div
    class="p-12px w-full h-140px flex flex-col justify-between mb-18px rounded-8px bg-white"
    @click="handleClick"
  >
    <div>订单号：{{ dateWithStatus.order_number }}</div>
    <div>下单时间：{{ dayjs(dateWithStatus.updated_at).format('YYYY-MM-DD HH:mm:ss') }}</div>
    <div>
      订单状态：<span :style="'color:' + dateWithStatus.statusObj?.color">{{
        dateWithStatus.statusObj?.text
      }}</span>
    </div>
    <div>订单数量：{{ dateWithStatus.number }}</div>
    <div>订单金额：{{ dateWithStatus.total_price }}</div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps(['data'])
const dateWithStatus = computed(() => {
  const item = { ...props.data }
  if (item.status === 1) {
    item.statusObj = {
      text: '进行中',
      color: '#f5a623'
    }
  } else if (item.status === 2) {
    item.statusObj = {
      text: '已完成',
      color: '#52c41a'
    }
  } else if (item.status === 3) {
    item.statusObj = {
      text: '用户申请取消',
      color: '#f5222d'
    }
  } else if (item.status === 4) {
    item.statusObj = {
      text: '用户取消',
      color: '#f5222d'
    }
  } else if (item.status === 5) {
    item.statusObj = {
      text: '陪玩师取消',
      color: '#f5222d'
    }
  }

  return item
})
const handleClick = () => {
  const id = props.data.id
  router.push({ name: 'OrderDetail', params: { id: id } })
}
</script>
<style lang="less" scoped></style>
